<template>
    <a-modal
        :visible="orderModalVisible"
        title="预定详情"
        cancelText="取消"
        okText="下单"
        @cancel="cancelOrder"
        @ok="handleSubmit"
    >
        <a-form :form="form">
            <a-form-item v-bind="formItemLayout" label="房型信息">
                <span>{{ currentOrderRoom.roomType }}</span>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="预定人姓名">
                <a-input
                    v-decorator="[
                        'clientName',
                        { rules: [{required: true, message: '请填写预定人姓名', }] }
                    ]"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="手机号">
                <a-input
                    v-decorator="[
                        'phoneNumber',
                        { rules: [{required: true, message: '请填写预定人联系手机', }] }
                    ]"
                />
            </a-form-item>
            
            <a-form-item v-bind="formItemLayout" label="入住日期">
                <span>{{ checkInDate }}</span>
            </a-form-item>

            <a-form-item v-bind="formItemLayout" label="退房日期">
                <span>{{ checkOutDate }}</span>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="房间数">
            <a-button type="primary" size="small" shape="circle" icon="minus" @click="minusOne" v-if="roomNums>1 && currentOrderRoom.curNum>1"></a-button>
            <span class="nums">{{roomNums}}</span>
            <a-button type="primary" size="small" shape="circle" icon="plus" @click="plusOne" v-if="(roomNums<5) && roomNums<currentOrderRoom.curNum"></a-button>
        </a-form-item>
            <a-form-item v-bind="formItemLayout" label="入住人数">
                <a-select
                    v-decorator="[
                        'peopleNum',
                        { rules: [{ required: true, message: '请选择入住人数' }] },
                    ]"
                    placeholder="请选择入住人数"
                    @change="changePeopleNum"
                >
                    <a-select-option :value="1">
                    1
                    </a-select-option>
                    <a-select-option :value="2">
                    2
                    </a-select-option>
                    <a-select-option :value="3" v-if="roomNums>1">
                    3
                    </a-select-option>
                    <a-select-option :value="4" v-if="roomNums>1">
                    4
                    </a-select-option>
                    <a-select-option :value="5" v-if="roomNums>2">
                        5
                    </a-select-option>
                    <a-select-option :value="6" v-if="roomNums>2">
                        6
                    </a-select-option>
                    <a-select-option :value="7" v-if="roomNums>3">
                        7
                    </a-select-option>
                    <a-select-option :value="8" v-if="roomNums>3">
                        8
                    </a-select-option>
                    <a-select-option :value="9" v-if="roomNums>4">
                        9
                    </a-select-option>
                    <a-select-option :value="10" v-if="roomNums>4">
                        10
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="有无儿童">
                <a-radio-group
                    v-decorator="[
                        'haveChild',
                        { rules: [{required: true, message: '请选择有无儿童入住', }] }
                    ]"
                >
                    <a-radio :value="1">有</a-radio>
                    <a-radio :value="0">无</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="备注" v-bind="formItemLayout">
                <a-input
                        type="textarea"
                        :rows="4"
                        placeholder="如有特殊需求，请备注"
                        v-decorator="['tip', { rules: [{ required: false, message: '请填写订单备注' }] }]"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="房间单价">
                <span>{{ currentOrderRoom.price }}</span>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="总价">
                <span>￥{{ totalPrice }}</span>
            </a-form-item>
            <a-divider></a-divider>
            <h2 v-if="orderMatchCouponList.length>0">优惠</h2>
            <a-checkbox-group v-model="checkedList" @change="onchange">
                <a-table
                    :columns="columns"
                    :dataSource="orderMatchCouponList"
                    :showHeader="true"
                    bordered
                    v-if="orderMatchCouponList.length>0"
                >
                    <a-checkbox
                        slot="id"
                        slot-scope="record"
                        :value="record"
                    >
                    </a-checkbox>
                </a-table>
            </a-checkbox-group>
             <a-form-item v-bind="formItemLayout" label="结算后总价">
                <span>￥{{ finalPrice }}</span>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { message } from 'ant-design-vue'
const moment = require('moment')
const columns = [
    {  
        title: '勾选',
        dataIndex: 'id',
        scopedSlots: {customRender: 'id'}
    },
    {
        title: '优惠类型',
        dataIndex: 'couponName',
        scopedSlots: {customRender: 'couponName'}
    },
    {
        title: '折扣',
        dataIndex: 'discount',
    },

    {
        title: '优惠简介',
        dataIndex: 'description',
        
    },
    {
        title: '优惠金额',
        dataIndex: 'discountMoney',
    },
  ];
export default {
    name: 'orderModal',
    data() {
        return {
            formItemLayout: {
                labelCol: {
                    xs: { span: 12 },
                    sm: { span: 6 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            },
            totalPrice: '',
            columns,
            checkedList: [],
            finalPrice: '',
            count: 0,
        }
    },
    mounted() {
        this.set_roomNums()
        console.log(this.roomNums)
        console.log(this.userId)
        this.changeRoomNum(1)
         this.totalPrice=""
         this.finalPrice=""
    },
    computed: {
        ...mapGetters([
            'orderModalVisible',
            'currentOrderRoom',
            'currentHotelId',
            'currentHotelInfo',
            'userId',
            'userInfo',
            'orderMatchCouponList',
            'checkInDate',
            'checkOutDate',
            'roomNums',
        ]),
        
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'orderModal' });
    },
    methods: {
        ...mapMutations([
            'set_orderModalVisible',
            'set_roomNums',
            'add_roomNums',
            'sub_roomNums'
        ]),
        ...mapActions([
            'addOrder',
            'getOrderMatchCoupons'
        ]),
        minusOne(){
            this.sub_roomNums()
            this.changeRoomNum(this.roomNum-1)
        },
        plusOne(){
            this.add_roomNums()
            if(this.count==0){
                this.changeRoomNum(this.roomNum)
            }
            else {
                this.changeRoomNum(this.roomNum + 1)
            }
            this.count++
        },
        cancelOrder() {
            this.set_orderModalVisible(false)
        },
        confirmOrder() {

        },
        changeDate(v) {
            if(this.totalPrice != ''){
                this.totalPrice = this.form.getFieldValue('roomNum') * moment(v[1]).diff(moment(v[0]), 'day') * Number(this.currentOrderRoom.price)
                this.finalPrice = this.totalPrice;
                this.finalPrice = this.finalPrice.toFixed(2)
                this.onchange();
            }
        },
        changePeopleNum(v){

        },
        changeRoomNum(v) {
            this.totalPrice = Number(v) * Number(this.currentOrderRoom.price) * moment(this.checkOutDate).diff(moment(this.checkInDate),'day')
            this.finalPrice = this.totalPrice;
            this.finalPrice = this.finalPrice.toFixed(2)
            this.roomNum =  v
            if(this.checkedList.length>0) {
                this.orderMatchCouponList.filter(item => this.checkedList.indexOf(item.id) != -1).forEach(item => {
                    if (item.targetRoomNum != null) {
                        if (v >= item.targetRoomNum) {
                            this.onchange()
                        }
                    } else {
                    }
                })
            }

            //this.onchange();

        },
        initialRoomNum(){
            this.totalPrice =  Number(this.currentOrderRoom.price) * moment(this.checkOutDate).diff(moment(this.checkInDate),'day')
            this.finalPrice = this.totalPrice;
            this.finalPrice = this.finalPrice.toFixed(2)
        },
        onchange() {
            this.finalPrice = this.totalPrice;
            this.finalPrice = this.finalPrice.toFixed(2)
            if(this.checkedList.length>0){
                this.orderMatchCouponList.filter(item => this.checkedList.indexOf(item.id)!=-1).forEach(item=>{
                    if (item.discount!==0)
                    {
                        this.finalPrice = this.finalPrice*item.discount;
                        this.finalPrice = this.finalPrice.toFixed(2)
                    } else{
                        if (item.targetMoney===-1){
                            this.finalPrice = this.finalPrice - item.discountMoney*this.roomNum;
                            this.finalPrice = this.finalPrice.toFixed(2)

                        }else{
                            this.finalPrice = this.finalPrice - item.discountMoney
                            this.finalPrice = this.finalPrice.toFixed(2)
                        }
                    }
                })
                    //item => this.finalPrice= this.finalPrice-item.discountMoney)
            }else{
                //this.finalPrice = this.totalPrice;
            }
        },
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    const data = {
                        hotelId: this.currentHotelId,
                        hotelName: this.currentHotelInfo.name,
                        userId: Number(this.userId),
                        checkInDate:this.checkInDate,
                        checkOutDate: this.checkOutDate,
                        // checkInDate: moment(this.form.getFieldValue('date')[0]).format('YYYY-MM-DD'),
                        // checkOutDate: moment(this.form.getFieldValue('date')[1]).format('YYYY-MM-DD'),
                        roomType: this.currentOrderRoom.roomType == '大床房' ? 'BigBed' : this.currentOrderRoom.roomType == '双床房' ? 'DoubleBed' : 'Family',
                        roomNum: Number(this.roomNum),
                        peopleNum: this.form.getFieldValue('peopleNum'),
                        haveChild: this.form.getFieldValue('haveChild'),
                        createDate: '',
                        price: this.checkedList.length > 0 ? this.finalPrice: this.totalPrice,
                        roomPrice:this.currentOrderRoom.price,
                        tip:this.form.getFieldValue('tip')
                    }
                    if(this.totalPrice==""){
                        message.error("房间数不能为0")
                    }
                    else {
                        this.addOrder(data)
                        this.form.resetFields()
                    }
                }
            });
        },
    },
    watch:{
        totalPrice:{
            handler(val){
                let data = {
                    userId: this.userId,
                    hotelId: this.currentHotelId,
                    orderPrice: this.totalPrice,
                    roomNum: Number(this.roomNum),
                    checkIn: this.checkInDate,
                    checkOut: this.checkOutDate,
                    // checkIn: moment(this.form.getFieldValue('date')[0]).format('YYYY-MM-DD'),
                    // checkOut: moment(this.form.getFieldValue('date')[1]).format('YYYY-MM-DD'),
                }
                this.getOrderMatchCoupons(data)
            }
        },
    }
}
</script>
<style scoped lang="less">
    .nums {
        margin-left: 20px;
        margin-right: 20px;
        font-size: 15px;
        /*font-family: "LiSong Pro",serif;*/
    }
</style>